<template>
  <div>
    <div class="box">
      <div class="left">
        <p>自编教材(册)</p>
      </div>
      <div class="right">
        <table>
          <!-- 头部 -->
          <thead>
            <th>教材名称</th>
            <th>初</th>
            <th>中</th>
            <th>高</th>
            <th>进行中</th>
            <th>完成</th>
            <th>出版</th>
            <th>出版机构</th>
            <th></th>
          </thead>
          <!-- 主体 -->
          <tbody>
            <tr v-for="(item, index) in list" :key="index">
              <td>
                <input type="text" v-model="item.value" />
              </td>
              <td v-for="e in one" :key="e.id">
                <input type="radio" v-model="item.one" :value="e.value" />
              </td>

              <td v-for="o in two" :key="o.value">
                <input type="radio" v-model="item.two" :value="o.value" @click="showInputFn(index, o.value)" />
              </td>

              <td>
                <input type="text" v-model="item.press">
              </td>
              <td>
                <a @click="delFn(index)" v-if="index !== 0">删除</a>
              </td>
            </tr>
          </tbody>
          <!-- 底部 -->
          <tfoot>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
              <a-button type="primary" @click="addFn"> 增加Add </a-button>
            </td>
          </tfoot>
        </table>
      </div>
    </div>
    <div class="box2">
      <a-button type="primary" @click="Submit">提交</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Demo-One',
  data () {
    return {
      one: [
        { id: 1, value: 101 },
        { id: 2, value: 102 },
        { id: 3, value: 103 }
      ],
      two: [{ value: 1001 }, { value: 1002 }, { value: 1003 }],
      list: [
        {
          one: [],
          two: [],
          value: '', // 输入框内容
          press: '' // 出版机构
        }
      ]
    }
  },
  created () {
    if (localStorage.getItem('aaa') === null) {
      this.list = [
        {
          one: [],
          two: [],
          value: '', // 输入框内容
          press: '' // 出版机构
        }
      ]
    } else {
      this.list = JSON.parse(localStorage.getItem('aaa'))
    }
  },
  methods: {
    // 点击添加一行
    addFn () {
      // console.log(1)
      this.list = [
        ...this.list,
        {
          one: [],
          two: [],
          value: '', // 输入框内容
          press: '' // 出版机构
        }
      ]
    },
    // 删除一行
    delFn (index) {
      this.list.splice(index, 1)
    },
    // 显示出版机构
    showInputFn (i, val) {
      // console.log(i, val)
      if (val === 1003) {
        this.list[i].press = '清华出版社'
      } else {
        this.list[i].press = ''
      }
    },
    // 提交数据
    Submit () {
      localStorage.setItem('aaa', JSON.stringify(this.list))
    }
  }
}
</script>

<style scoped lang="less">
.box {
  width: 60%;
  // background-color: blueviolet;
  padding-top: 20px;
  margin: auto;
  display: flex;
  justify-content: center;
  .left {
    width: 20%;
    // background-color: aqua;
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 900;
  }
  .right {
    width: 80%;
    // background-color: pink;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    text-align: center;
    table {
      border-collapse: collapse;
      th {
        border: 1px solid #333;
      }
      tbody {
        td {
          border: 1px solid #333;
        }
      }
    }
  }
}
.box2 {
  text-align: center;
  margin-top: 10px;
}
</style>
